<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美食盲盒 - 惊喜外卖体验</title>
    <style>
        :root {
            --primary-color: #FF6B6B;
            --secondary-color: #4ECDC4;
            --accent-color: #FFE66D;
            --dark-color: #292F36;
            --light-color: #F7FFF7;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial Rounded MT Bold', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: var(--light-color);
            color: var(--dark-color);
            overflow-x: hidden;
        }
        
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .nav-links {
            display: flex;
            gap: 1.5rem;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            transition: all 0.3s;
        }
        
        .nav-links a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .nav-links a.active {
            background-color: var(--accent-color);
            color: var(--dark-color);
        }
        
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: var(--accent-color);
            opacity: 0.7;
            animation: fall 5s linear infinite;
        }
        
        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
        
        h1 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .tagline {
            font-size: 1rem;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1.5rem;
            min-height: calc(100vh - 150px);
        }
        
        .page {
            display: none;
        }
        
        .page.active {
            display: block;
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 首页样式 */
        .intro {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .intro p {
            font-size: 1.1rem;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto 1.5rem;
        }
        
        .cta-button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            font-size: 1.1rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin: 0.5rem;
        }
        
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
            background-color: #ff5252;
        }
        
        .how-it-works {
            margin-bottom: 2rem;
        }
        
        .steps {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 1.5rem;
        }
        
        .step {
            flex: 1;
            min-width: 250px;
            margin: 0.8rem;
            padding: 1.2rem;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .step:hover {
            transform: translateY(-8px);
        }
        
        .step-icon {
            font-size: 2.5rem;
            margin-bottom: 0.8rem;
            color: var(--primary-color);
        }
        
        .step h3 {
            margin-bottom: 0.8rem;
            color: var(--primary-color);
            font-size: 1.2rem;
        }
        
        .blind-box-container {
            position: relative;
            height: 350px;
            margin: 2rem 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .blind-box {
            width: 180px;
            height: 180px;
            background-color: var(--accent-color);
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 1s ease;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        
        .blind-box:hover {
            transform: scale(1.05);
        }
        
        .blind-box.open {
            transform: rotateY(180deg);
        }
        
        .blind-box-front, .blind-box-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            padding: 1rem;
        }
        
        .blind-box-front {
            background-color: var(--accent-color);
            flex-direction: column;
        }
        
        .blind-box-back {
            background-color: var(--secondary-color);
            transform: rotateY(180deg);
            color: white;
        }
        
        .box-icon {
            font-size: 3.5rem;
            margin-bottom: 0.8rem;
        }
        
        .price-tag {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: var(--primary-color);
            color: white;
            padding: 0.4rem 0.8rem;
            border-radius: 50px;
            font-weight: bold;
            font-size: 0.9rem;
        }
        
        .testimonials {
            margin: 2rem 0;
        }
        
        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 1.5rem;
        }
        
        .testimonial {
            background-color: white;
            padding: 1.2rem;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .testimonial-text {
            font-style: italic;
            margin-bottom: 0.8rem;
            font-size: 0.95rem;
        }
        
        .testimonial-author {
            font-weight: bold;
            color: var(--primary-color);
            font-size: 0.9rem;
        }
        
        /* 点餐页面样式 */
        .box-options {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin: 2rem 0;
        }
        
        .box-option {
            background-color: white;
            border-radius: 15px;
            padding: 1.2rem;
            width: 220px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            cursor: pointer;
        }
        
        .box-option:hover {
            transform: translateY(-8px);
        }
        
        .box-option.selected {
            border: 3px solid var(--primary-color);
        }
        
        .box-option h3 {
            color: var(--primary-color);
            margin: 0.8rem 0;
            font-size: 1.2rem;
        }
        
        .box-option .price {
            font-size: 1.3rem;
            font-weight: bold;
            color: var(--dark-color);
        }
        
        .order-form {
            background-color: white;
            padding: 1.5rem;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: 1.5rem auto;
        }
        
        .form-group {
            margin-bottom: 1.2rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
            font-size: 0.95rem;
        }
        
        .form-group input, 
        .form-group select, 
        .form-group textarea {
            width: 100%;
            padding: 0.7rem;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 0.95rem;
        }
        
        .form-group textarea {
            height: 90px;
        }
        
        .form-submit {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0.8rem;
            font-size: 1rem;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s;
            margin-top: 0.5rem;
        }
        
        .form-submit:hover {
            background-color: #ff5252;
        }
        
        /* 我的订餐页面样式 */
        .orders-container {
            margin: 1.5rem 0;
        }
        
        .order-card {
            background-color: white;
            border-radius: 15px;
            padding: 1.2rem;
            margin-bottom: 1.2rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.8rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #eee;
        }
        
        .order-id {
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .order-date {
            color: #666;
            font-size: 0.9rem;
        }
        
        .order-status {
            display: inline-block;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        
        .status-delivered {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-preparing {
            background-color: #fff3cd;
            color: #856404;
        }
        
        .order-details {
            margin-top: 0.8rem;
        }
        
        .order-detail {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        
        .detail-label {
            font-weight: bold;
            color: #555;
        }
        
        .open-box-btn {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 0.8rem;
            transition: background-color 0.3s;
        }
        
        .open-box-btn:hover {
            background-color: #3bb4ac;
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: white;
            border-radius: 15px;
            padding: 1.5rem;
            max-width: 500px;
            width: 90%;
            position: relative;
            text-align: center;
        }
        
        .close-modal {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 1.5rem;
            cursor: pointer;
            color: #666;
        }
        
        .modal-blind-box {
            width: 200px;
            height: 200px;
            background-color: var(--accent-color);
            border-radius: 15px;
            margin: 1rem auto;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 1s ease;
        }
        
        .modal-blind-box.open {
            transform: rotateY(180deg);
        }
        
        .modal-blind-box-front, .modal-blind-box-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 15px;
            padding: 0.8rem;
        }
        
        .modal-blind-box-front {
            background-color: var(--accent-color);
            flex-direction: column;
        }
        
        .modal-blind-box-back {
            background-color: var(--secondary-color);
            transform: rotateY(180deg);
            color: white;
            overflow-y: auto;
        }
        
        .modal-box-icon {
            font-size: 3rem;
            margin-bottom: 0.5rem;
        }
        
        .food-items {
            margin-top: 0.5rem;
            text-align: left;
            max-height: 120px;
            overflow-y: auto;
            padding-right: 5px;
            width: 100%;
        }
        
        .food-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.8rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px dashed rgba(255,255,255,0.3);
            flex-wrap: wrap;
        }
        
        .food-icon {
            font-size: 1.5rem;
            margin-right: 0.8rem;
            color: white;
        }
        
        .food-name {
            flex: 1;
            min-width: 120px;
            word-break: break-word;
        }
        
        .food-type {
            font-size: 0.8rem;
            color: rgba(255,255,255,0.8);
            width: 100%;
            margin-top: 0.3rem;
        }
        
        /* 滚动条样式 */
        .food-items::-webkit-scrollbar {
            width: 5px;
        }
        
        .food-items::-webkit-scrollbar-thumb {
            background-color: rgba(255,255,255,0.3);
            border-radius: 3px;
        }
        
        .no-orders {
            text-align: center;
            padding: 2rem;
            color: #666;
        }
        
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                padding: 1rem 0.5rem;
            }
            
            .nav-links {
                margin-top: 0.8rem;
                gap: 0.8rem;
            }
            
            .nav-links a {
                padding: 0.3rem 0.8rem;
                font-size: 0.9rem;
            }
            
            h1 {
                font-size: 1.5rem;
            }
            
            .steps {
                flex-direction: column;
            }
            
            .step {
                margin: 0.5rem 0;
            }
            
            .box-options {
                flex-direction: column;
                align-items: center;
            }
            
            .box-option {
                width: 100%;
                max-width: 280px;
            }
            
            .order-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .order-status {
                margin-top: 0.5rem;
            }
            
            .modal-blind-box {
                width: 160px;
                height: 160px;
            }
            
            .food-name {
                min-width: 100px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <header>
        <div class="logo">
            <h1>美食盲盒</h1>
            <p class="tagline">惊喜外卖体验</p>
        </div>
        <div class="nav-links">
            <a href="#" class="nav-link active" data-page="home">首页</a>
            <a href="#" class="nav-link" data-page="order">点餐</a>
            <a href="#" class="nav-link" data-page="my-orders">我的订餐</a>
        </div>
        <div id="confetti-container"></div>
    </header>
    
    <div class="container">
        <!-- 首页 -->
        <div class="page active" id="home-page">
            <section class="intro">
                <h2>发现未知的美食体验</h2>
                <p>厌倦了总是点同样的外卖？美食盲盒为您带来全新的用餐体验！我们与本地顶级餐厅合作，为您精心准备惊喜餐盒。只需选择您的口味偏好和预算，剩下的交给我们来创造惊喜！</p>
                <button class="cta-button" data-page="order">立即订购惊喜</button>
            </section>
            
            <section class="how-it-works">
                <h2>如何运作</h2>
                <div class="steps">
                    <div class="step">
                        <div class="step-icon"><i class="fas fa-user-cog"></i></div>
                        <h3>设置偏好</h3>
                        <p>告诉我们您的饮食限制、口味偏好和预算范围</p>
                    </div>
                    <div class="step">
                        <div class="step-icon"><i class="fas fa-random"></i></div>
                        <h3>随机匹配</h3>
                        <p>我们的算法根据您的偏好从合作餐厅中精选惊喜餐盒</p>
                    </div>
                    <div class="step">
                        <div class="step-icon"><i class="fas fa-surprise"></i></div>
                        <h3>享受惊喜</h3>
                        <p>收到并打开您的盲盒，发现今天的美味惊喜！</p>
                    </div>
                </div>
            </section>
            
            <section class="blind-box-demo">
                <h2>体验盲盒乐趣</h2>
                <p>点击下面的盒子看看您可能会得到什么惊喜！</p>
                <div class="blind-box-container">
                    <div class="blind-box" id="blind-box">
                        <div class="blind-box-front">
                            <div class="box-icon"><i class="fas fa-gift"></i></div>
                            <h3>惊喜美食盲盒</h3>
                            <div class="price-tag">¥39</div>
                        </div>
                        <div class="blind-box-back">
                            <div id="surprise-content">
                                <div class="box-icon"><i class="fas fa-utensils"></i></div>
                                <h3>今日惊喜：</h3>
                                <p id="surprise-text">点击盒子查看惊喜</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="testimonials">
                <h2>食客评价</h2>
                <div class="testimonial-grid">
                    <div class="testimonial">
                        <p class="testimonial-text">"通过美食盲盒我发现了三家新的最爱餐厅！这种惊喜感让外卖变得有趣多了。"</p>
                        <p class="testimonial-author">- 张小姐，上海</p>
                    </div>
                    <div class="testimonial">
                        <p class="testimonial-text">"作为一个美食爱好者，这是我用过最有趣的外卖服务。品质一直很高，从未失望。"</p>
                        <p class="testimonial-author">- 李先生，北京</p>
                    </div>
                    <div class="testimonial">
                        <p class="testimonial-text">"完美解决了'今天吃什么'的难题！价格合理，食物总是很美味。"</p>
                        <p class="testimonial-author">- 王女士，广州</p>
                    </div>
                </div>
            </section>
        </div>
        
        <!-- 点餐页面 -->
        <div class="page" id="order-page">
            <h2>选择您的盲盒</h2>
            <p>从下面的选项中选择您想要的盲盒类型</p>
            
            <div class="box-options">
                <div class="box-option" data-price="29">
                    <div class="box-icon"><i class="fas fa-box-open"></i></div>
                    <h3>基础盲盒</h3>
                    <p>1道主菜 + 1份小吃</p>
                    <div class="price">¥29</div>
                </div>
                <div class="box-option selected" data-price="39">
                    <div class="box-icon"><i class="fas fa-gift"></i></div>
                    <h3>标准盲盒</h3>
                    <p>1道主菜 + 1份小吃 + 1份甜点</p>
                    <div class="price">¥39</div>
                </div>
                <div class="box-option" data-price="59">
                    <div class="box-icon"><i class="fas fa-crown"></i></div>
                    <h3>豪华盲盒</h3>
                    <p>2道主菜 + 2份小吃 + 1份甜点 + 饮料</p>
                    <div class="price">¥59</div>
                </div>
            </div>
            
            <div class="order-form">
                <h2>填写订单信息</h2>
                <form id="food-blindbox-form">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">电话</label>
                        <input type="tel" id="phone" name="phone" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="address">送货地址</label>
                        <input type="text" id="address" name="address" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="delivery-time">送达时间</label>
                        <input type="datetime-local" id="delivery-time" name="delivery-time" required>
                    </div>
                    
                    <div class="form-group">
                        <label>饮食偏好</label>
                        <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
                            <label style="display: flex; align-items: center;">
                                <input type="checkbox" name="preference" value="vegetarian"> 素食
                            </label>
                            <label style="display: flex; align-items: center;">
                                <input type="checkbox" name="preference" value="spicy"> 辣味
                            </label>
                            <label style="display: flex; align-items: center;">
                                <input type="checkbox" name="preference" value="seafood"> 海鲜
                            </label>
                            <label style="display: flex; align-items: center;">
                                <input type="checkbox" name="preference" value="meat"> 肉类
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="allergies">过敏原/特殊要求</label>
                        <textarea id="allergies" name="allergies" placeholder="请列出任何过敏食物或其他特殊要求"></textarea>
                    </div>
                    
                    <input type="hidden" id="selected-box-price" name="box-price" value="39">
                    <input type="hidden" id="selected-box-type" name="box-type" value="标准盲盒">
                    
                    <button type="submit" class="form-submit">提交订单</button>
                </form>
            </div>
        </div>
        
        <!-- 我的订餐页面 -->
        <div class="page" id="my-orders-page">
            <h2>我的订餐</h2>
            <p>查看您的历史订单和当前订单</p>
            
            <div class="orders-container" id="orders-container">
                <!-- 订单将通过JavaScript动态生成 -->
                <div class="no-orders">
                    <i class="fas fa-box-open" style="font-size: 3rem; color: #ccc; margin-bottom: 1rem;"></i>
                    <p>您还没有任何订单</p>
                    <button class="cta-button" data-page="order">去点餐</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 盲盒弹窗 -->
    <div class="modal" id="blindbox-modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h3>打开您的盲盒</h3>
            <p>点击下面的盒子查看您的美食惊喜！</p>
            
            <div class="modal-blind-box" id="modal-blind-box">
                <div class="modal-blind-box-front">
                    <div class="modal-box-icon"><i class="fas fa-gift"></i></div>
                    <h4>美食盲盒</h4>
                </div>
                <div class="modal-blind-box-back">
                    <div id="modal-surprise-content">
                        <h4>您的美食：</h4>
                        <div class="food-items" id="food-items">
                            <!-- 食物内容将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <h3>美食盲盒</h3>
        <p>让每一餐都成为惊喜</p>
        <div class="social-links">
            <a href="#"><i class="fab fa-weixin"></i></a>
            <a href="#"><i class="fab fa-weibo"></i></a>
            <a href="#"><i class="fab fa-tiktok"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
        </div>
        <p>© 2023 美食盲盒 版权所有</p>
    </footer>

    <script>
        // 创建五彩纸屑效果
        function createConfetti() {
            const container = document.getElementById('confetti-container');
            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.animationDuration = (Math.random() * 3 + 2) + 's';
                confetti.style.animationDelay = Math.random() * 5 + 's';
                confetti.style.backgroundColor = getRandomColor();
                container.appendChild(confetti);
            }
        }
        
        function getRandomColor() {
            const colors = ['#FF6B6B', '#4ECDC4', '#FFE66D', '#A5FFD6', '#B388EB'];
            return colors[Math.floor(Math.random() * colors.length)];
        }
        
        // 页面导航功能
        function switchPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            // 显示选中的页面
            document.getElementById(pageId).classList.add('active');
            
            // 更新导航链接状态
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // 设置当前活动链接
            document.querySelector(`.nav-link[data-page="${pageId.replace('-page', '')}"]`).classList.add('active');
            
            // 如果是我的订餐页面，刷新订单列表
            if (pageId === 'my-orders-page') {
                displayOrders();
            }
        }
        
        // 初始化页面导航
        document.querySelectorAll('.nav-link, .cta-button[data-page]').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const pageId = this.getAttribute('data-page') + '-page';
                switchPage(pageId);
            });
        });
        
        // 首页盲盒点击效果
        document.getElementById('blind-box').addEventListener('click', function() {
            // 每次点击都生成新的随机内容
            const surprises = [
                { icon: 'fa-pizza-slice', text: '意大利玛格丽特披萨 + 提拉米苏' },
                { icon: 'fa-drumstick-bite', text: '美式烤鸡套餐 + 苹果派' },
                { icon: 'fa-fish', text: '日式刺身拼盘 + 抹茶大福' },
                { icon: 'fa-pepper-hot', text: '四川麻辣香锅 + 红糖冰粉' },
                { icon: 'fa-bread-slice', text: '法式三明治套餐 + 马卡龙' }
            ];
            
            const surprise = surprises[Math.floor(Math.random() * surprises.length)];
            document.getElementById('surprise-content').innerHTML = `
                <div class="box-icon"><i class="fas ${surprise.icon}"></i></div>
                <h3>今日惊喜：</h3>
                <p>${surprise.text}</p>
            `;
            
            // 切换打开状态
            this.classList.toggle('open');
        });
        
        // 餐盒选择功能
        const boxOptions = document.querySelectorAll('.box-option');
        boxOptions.forEach(option => {
            option.addEventListener('click', function() {
                boxOptions.forEach(opt => opt.classList.remove('selected'));
                this.classList.add('selected');
                document.getElementById('selected-box-price').value = this.dataset.price;
                
                // 设置盲盒类型
                const boxType = this.querySelector('h3').textContent;
                document.getElementById('selected-box-type').value = boxType;
            });
        });
        
        // 存储订单的数组
        let orders = JSON.parse(localStorage.getItem('foodBlindBoxOrders')) || [];
        
        // 表单提交处理
        document.getElementById('food-blindbox-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = {
                name: document.getElementById('name').value,
                phone: document.getElementById('phone').value,
                address: document.getElementById('address').value,
                deliveryTime: document.getElementById('delivery-time').value,
                preferences: Array.from(document.querySelectorAll('input[name="preference"]:checked')).map(el => el.value),
                allergies: document.getElementById('allergies').value,
                boxPrice: document.getElementById('selected-box-price').value,
                boxType: document.getElementById('selected-box-type').value,
                orderDate: new Date().toISOString(),
                status: 'preparing',
                orderId: 'FB' + Math.floor(Math.random() * 1000000),
                foodItems: generateRandomFoodItems(document.getElementById('selected-box-type').value)
            };
            
            // 添加到订单数组
            orders.unshift(formData);
            
            // 保存到本地存储
            localStorage.setItem('foodBlindBoxOrders', JSON.stringify(orders));
            
            // 显示成功消息
            alert(`订单提交成功！您的订单号是：${formData.orderId}\n预计送达时间：${new Date(formData.deliveryTime).toLocaleString()}`);
            
            // 重置表单
            this.reset();
            
            // 切换到我的订餐页面
            switchPage('my-orders-page');
        });
        
        // 生成随机食物项
        function generateRandomFoodItems(boxType) {
            const foodItems = [];
            
            // 定义可能的食物选项
            const mainDishes = [
                { name: '泰式绿咖喱鸡', icon: 'fa-utensils', type: '主菜' },
                { name: '意大利玛格丽特披萨', icon: 'fa-pizza-slice', type: '主菜' },
                { name: '日式照烧鸡排饭', icon: 'fa-drumstick-bite', type: '主菜' },
                { name: '四川麻辣香锅', icon: 'fa-pepper-hot', type: '主菜' },
                { name: '法式红酒炖牛肉', icon: 'fa-wine-glass-alt', type: '主菜' }
            ];
            
            const snacks = [
                { name: '芒果糯米饭', icon: 'fa-mango', type: '小吃' },
                { name: '日式煎饺', icon: 'fa-dumpling', type: '小吃' },
                { name: '泰式春卷', icon: 'fa-roll', type: '小吃' },
                { name: '美式薯条', icon: 'fa-french-fries', type: '小吃' },
                { name: '盐酥鸡', icon: 'fa-drumstick', type: '小吃' }
            ];
            
            const desserts = [
                { name: '提拉米苏', icon: 'fa-cake', type: '甜点' },
                { name: '抹茶大福', icon: 'fa-ice-cream', type: '甜点' },
                { name: '红糖冰粉', icon: 'fa-glass-whiskey', type: '甜点' },
                { name: '马卡龙', icon: 'fa-cookie', type: '甜点' },
                { name: '水果拼盘', icon: 'fa-apple-alt', type: '甜点' }
            ];
            
            const drinks = [
                { name: '柠檬茶', icon: 'fa-glass-martini-alt', type: '饮料' },
                { name: '冰美式咖啡', icon: 'fa-coffee', type: '饮料' },
                { name: '鲜榨橙汁', icon: 'fa-glass-whiskey', type: '饮料' },
                { name: '泰式奶茶', icon: 'fa-mug-hot', type: '饮料' }
            ];
            
            // 根据盲盒类型添加食物项
            if (boxType === '基础盲盒') {
                foodItems.push(getRandomItem(mainDishes));
                foodItems.push(getRandomItem(snacks));
            } else if (boxType === '标准盲盒') {
                foodItems.push(getRandomItem(mainDishes));
                foodItems.push(getRandomItem(snacks));
                foodItems.push(getRandomItem(desserts));
            } else if (boxType === '豪华盲盒') {
                foodItems.push(getRandomItem(mainDishes));
                foodItems.push(getRandomItem(mainDishes));
                foodItems.push(getRandomItem(snacks));
                foodItems.push(getRandomItem(snacks));
                foodItems.push(getRandomItem(desserts));
                foodItems.push(getRandomItem(drinks));
            }
            
            return foodItems;
        }
        
        function getRandomItem(array) {
            return array[Math.floor(Math.random() * array.length)];
        }
        
        // 显示订单列表
        function displayOrders() {
            const ordersContainer = document.getElementById('orders-container');
            
            if (orders.length === 0) {
                ordersContainer.innerHTML = `
                    <div class="no-orders">
                        <i class="fas fa-box-open" style="font-size: 3rem; color: #ccc; margin-bottom: 1rem;"></i>
                        <p>您还没有任何订单</p>
                        <button class="cta-button" data-page="order">去点餐</button>
                    </div>
                `;
                
                // 添加事件监听器到新创建的按钮
                document.querySelector('.no-orders .cta-button').addEventListener('click', function(e) {
                    e.preventDefault();
                    switchPage('order-page');
                });
                
                return;
            }
            
            ordersContainer.innerHTML = '';
            
            orders.forEach((order, index) => {
                const orderDate = new Date(order.orderDate);
                const deliveryTime = new Date(order.deliveryTime);
                
                const orderCard = document.createElement('div');
                orderCard.className = 'order-card';
                orderCard.innerHTML = `
                    <div class="order-header">
                        <div>
                            <span class="order-id">订单号: ${order.orderId}</span>
                            <span class="order-date">${orderDate.toLocaleString()}</span>
                        </div>
                        <span class="order-status ${order.status === 'delivered' ? 'status-delivered' : 'status-preparing'}">
                            ${order.status === 'delivered' ? '已送达' : '准备中'}
                        </span>
                    </div>
                    <div class="order-details">
                        <div class="order-detail">
                            <span class="detail-label">盲盒类型:</span>
                            <span>${order.boxType}</span>
                        </div>
                        <div class="order-detail">
                            <span class="detail-label">金额:</span>
                            <span>¥${order.boxPrice}</span>
                        </div>
                        <div class="order-detail">
                            <span class="detail-label">预计送达:</span>
                            <span>${deliveryTime.toLocaleString()}</span>
                        </div>
                        <button class="open-box-btn" data-order-index="${index}">
                            <i class="fas fa-box-open"></i> 打开盲盒
                        </button>
                    </div>
                `;
                
                ordersContainer.appendChild(orderCard);
            });
            
            // 为所有"打开盲盒"按钮添加事件监听器
            document.querySelectorAll('.open-box-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const orderIndex = this.getAttribute('data-order-index');
                    openBlindBoxModal(orderIndex);
                });
            });
        }
        
        // 打开盲盒弹窗
        function openBlindBoxModal(orderIndex) {
            const modal = document.getElementById('blindbox-modal');
            const order = orders[orderIndex];
            const modalBlindBox = document.getElementById('modal-blind-box');
            
            // 重置盲盒状态
            modalBlindBox.classList.remove('open');
            
            // 填充食物项
            const foodItemsContainer = document.getElementById('food-items');
            foodItemsContainer.innerHTML = '';
            
            order.foodItems.forEach(item => {
                const foodItem = document.createElement('div');
                foodItem.className = 'food-item';
                foodItem.innerHTML = `
                    <div class="food-icon"><i class="fas ${item.icon}"></i></div>
                    <div class="food-name">${item.name}</div>
                    <div class="food-type">${item.type}</div>
                `;
                foodItemsContainer.appendChild(foodItem);
            });
            
            // 显示弹窗
            modal.style.display = 'flex';
            
            // 移除旧的点击事件监听器
            const newModalBlindBox = modalBlindBox.cloneNode(true);
            modalBlindBox.parentNode.replaceChild(newModalBlindBox, modalBlindBox);
            
            // 添加新的点击事件监听器
            document.getElementById('modal-blind-box').addEventListener('click', function() {
                this.classList.add('open');
            });
        }
        
        // 关闭弹窗
        document.querySelector('.close-modal').addEventListener('click', function() {
            document.getElementById('blindbox-modal').style.display = 'none';
        });
        
        // 点击弹窗外部关闭
        window.addEventListener('click', function(event) {
            if (event.target === document.getElementById('blindbox-modal')) {
                document.getElementById('blindbox-modal').style.display = 'none';
            }
        });
        
        // 页面加载时初始化
        window.addEventListener('load', function() {
            createConfetti();
            
            // 设置默认送达时间为1小时后
            const now = new Date();
            const oneHourLater = new Date(now.getTime() + 60 * 60 * 1000);
            document.getElementById('delivery-time').value = oneHourLater.toISOString().slice(0, 16);
            
            // 默认选择标准盲盒
            document.querySelector('.box-option.selected').click();
        });
    </script>
</body>
</html>